<!--系统通知-帮助信息-->
<template>
  <my-card title="帮助信息">
    <template slot>
      <div class="page-card-body">
        <div v-if="list.length > 0">
          <div class="sys-box" v-for="item in list" :key="item.id">
            <div class="sys-title-box">
              <div class="sys-title-left"></div>
              <div>{{ item.title }}</div>
            </div>
            <spread class="sys-content-box" :text="item.content"></spread>
            <div class="sys-time-box">{{ item.createTime }}</div>
          </div>
        </div>
        <div v-else>暂无数据</div>
        <div class="pagination-box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 30]"
            :page-size="pageParams.count"
            :total="total"
            layout=" prev, pager, next,sizes,jumper"
          >
          </el-pagination>
        </div>
      </div>
    </template>
  </my-card>
</template>

<script>
  import MyCard from "@/components/my-card/index";

  import spread from "@/components/Spread/index";
  import lineHeader from "@/components/line-header/index";
  import { hkGetNoticeList } from "@/api/notice";
  import { formatTime } from "@/utils/index";
  import {
    isNull,
    hkShowLoading,
    hkHidLoading,
    hkShowSuccessText,
    hkShowErrorText
  } from "@/utils/tools";
  export default {
    components: {
      lineHeader,
      spread,
      MyCard
    },
    props: {},
    data() {
      return {
        total: 0,
        pageParams: {
          page: 1,
          direction: 1,
          count: 10
        },
        list: []
      };
    },
    watch: {},
    computed: {},
    methods: {
      hkGetNoticeList() {
        hkShowLoading("加载中...");
        hkGetNoticeList(this.pageParams)
          .then(({ data }) => {
            hkHidLoading();
            this.total = data.total;
            this.list = data.data.map(item => {
              item.createTime = formatTime(item.createTime);
              return item;
            });
          })
          .catch(err => {
            hkHidLoading();
            hkShowErrorText(err.message);
          });
      },
      handleSizeChange(val) {
        this.pageParams.count = val;
        this.hkGetNoticeList();
      },
      handleCurrentChange(val) {
        this.pageParams.page = val;
        this.hkGetNoticeList();
      }
    },
    created() {},
    mounted() {
      this.hkGetNoticeList();
    }
  };
</script>
<style lang="scss" scoped>
  .page-card-body {
    .sys-box {
      margin: 15px 50px;
      padding: 15px;
      border: 1px solid #d5d8da;
      border-radius: 4px;
      .sys-title-box {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        .sys-title-left {
          background-color: #e91818;
          height: 6px;
          width: 6px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .sys-content-box {
        margin: 15px 0;
      }
      .sys-time-box {
        font-size: 12px;
        color: #bbbbbb;
      }
    }
  }
</style>
